@extends('layouts.admin')
@push('morecss')
    <!-- orris -->
    <link href="{{ asset('/vendor/AdminInspinia/css/plugins/morris/morris-0.4.3.min.css') }}" rel="stylesheet">
@endpush

@push('morescript')
    <!-- ChartJS-->
    <script src="{{ asset('/vendor/AdminInspinia/js/plugins/chartJs/Chart.min.js') }}"></script>
    <script type="application/javascript">
        let page_params = {
            @can('admin.wxtjarticle.usershare')
            url_list: '{{ route('admin.wxtjarticle.usershare') }}',
            @endcan
            data_start_date:'{{ $startDate }}',
            data_end_date:'{{ $endDate }}',
        }
    </script>
    <!-- require page js -->
    <script src="{{ mix('js/admin/wxtjarticle_usershare.js') }}"></script>
@endpush
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight ecommerce">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="row">
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label" for="event">分享场景</label>
                        <select class="form-control input-s-sm inline" v-model="searchParams.share_scene">
                            @foreach($shareSceneList as $typeId => $typeName)
                                <option value="{{$typeId}}">{{$typeName}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div class="col-sm-6">
                                <label class="control-label" for="start_time">开始时间</label>
                                <div>
                                    <vue-datepicker-local
                                            v-model="searchParams.start_time"
                                            format="YYYY-MM-DD" clearable
                                            placeholder="开始时间"></vue-datepicker-local>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="control-label" for="end_time">结束时间</label>
                                <div>
                                    <vue-datepicker-local
                                            v-model="searchParams.end_time"
                                            format="YYYY-MM-DD" clearable
                                            placeholder="结束时间"></vue-datepicker-local>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label" for="product_name">&nbsp;&nbsp;</label>
                        <div>
                            <button class="btn btn-primary" type="button" v-on:click="query"><i
                                        class="fa fa-search"></i>
                                搜索
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1">分享人数</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-2">分享次数</a></li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <canvas id="myChart1" height="140"></canvas>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <canvas id="myChart2" height="140"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection